<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>获取当前经纬度位置+圆形</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw" defer></script>
	<script>

		let map;
		let zoom = 14;
		let num = 1;

		// 获取当前经纬度
		function getCoordinate() {
			var geolocation = 'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw';
			(function() {
			    xhr = new XMLHttpRequest();
			    xhr.open('POST', geolocation);
			    xhr.onload = function () {
			        let response = JSON.parse(this.responseText);
			        let coordinate = response.location;
			        console.log(response.location);
			        initMap(coordinate);
			        roundShow(num,coordinate);
			    }
			    xhr.send();
			})();
		};

		// 地图渲染
		function initMap(uluru) {
			map = new google.maps.Map(document.getElementById("map"), {
				center: uluru,
				zoom: zoom // 数字越大，高度越低
			});

			// 定点
			var marker = new google.maps.Marker({
				position: uluru,
				map: map,
				animation: google.maps.Animation.DROP
			});

			// 咨询窗
			var infowindow = new google.maps.InfoWindow({
				content: '坐标是：'+uluru.lat+','+uluru.lag,
			    position: uluru,
			    size: new google.maps.Size(50, 50)
			});
			infowindow.open(map, marker);  // 调用
		};

		// 圆形显示
		function roundShow(num, position) {
			let circle = new google.maps.Circle({
				center: position,
				radius: num * 1000,
				strokeOpacity: 0,
				fillColor: '#f00',
				fillOpacity: 0.35,
				map: map
		    });

		    marker = new google.maps.Marker({
				map: map,
				label: num.toString()
		    });
		}

		window.onload = function(){
    		getCoordinate();
		}
	</script>
</body>
</html>